<template>
  <div>
    <div class="video_title">
      <van-icon name="arrow-left" class="icon" @click="goBack" />
      <p>统计</p>
    </div>
    <div class="tj_content">
      <div class="pace">
        <p>学习统计分析</p>
        <ul>
          <li>
            <p>课程学习</p>
            <div class="liBox">
              <p>{{ objForm.m_count }}</p>
              <span>已学完</span>
            </div>
            <span> {{ objForm.m_learn_count }}<i>次</i> </span>
          </li>
          <li v-if="qyType('lapengfei')">
            <p>模拟考试</p>
            <div class="liBox">
              <p>{{ parseInt(objForm.mock_avg_score) }}</p>
              <span>平均分</span>
            </div>
            <span> {{ objForm.mock_count }}<i>次</i> </span>
          </li>
          <li v-else>
            <p>正式考试</p>
            <div class="liBox">
              <p>{{ parseInt(objForm.exam_avg_score) }}</p>
              <span>平均分</span>
            </div>
            <span> {{ objForm.exam_count }}<i>次</i> </span>
          </li>
          <li>
            <p>专项练习</p>
            <div class="liBox">
              <p>{{ parseInt(objForm.exer_done_rate * 100) }}%</p>
              <span>练习进度</span>
            </div>
            <span> {{ objForm.exer_count }}<i>次</i> </span>
          </li>
        </ul>
      </div>

      <div class="pace" style="margin-top: 0.75rem">
        <van-button
          round
          type="info"
          style="width: 100%"
          @click="
            () => {
              this.$router.push('/record');
            }
          "
          >查看详情</van-button
        >
      </div>
    </div>
  </div>
</template>

<script>
import { myTj } from "@/api/admin.js";
import { getapplyid, getsubjectTitle } from "@/utils/auth";
export default {
  data() {
    return {
      objForm: {
        exer_answered: 0,
        exer_done_rate: 0,
        exer_count: 0,
        exer_correct_rate: 0,
        exer_total: 0,
        exer_sub: getsubjectTitle(),
        exer_usetime: 0,
        m_count: 0,
        m_long: 0,
        m_learn_count: 0,
        mock_count: 0,
        mock_avg_score: 0,
        mock_avg_usetime: 0,
        exam_avg_score:0,
        exam_count:0,
      },
    };
  },
  methods: {
    goBack() {
      this.$router.go(-1);
    },
    listData() {
      myTj({ applyid: getapplyid() }).then((res) => {
        if (res.code == 200) {
          this.objForm = res.data;
          this.objForm.exer_sub = getsubjectTitle();
        }
      });
    },
  },
  created() {
    this.listData();
  },
};
</script>

<style lang="scss" scoped>
.video_title {
  display: flex;
  align-items: center;
  padding: 0 12px;
  background: #327bff;
  color: #fff;
  height: 2.75rem;

  p {
    margin: 0;
    width: calc(100vw - 64px);
    display: flex;
    justify-content: center;
  }
  .icon {
    font-size: 1.25rem;
  }
}
.tj_content {
  padding: 0.75rem;
  height: calc(100vh - 2.75rem);
  background: #eee;
  .pace {
    background: #fff;
    width: 100%;
    padding: 0.75rem;
    & > p {
      margin: 0;
      padding-bottom: 0.75rem;
      width: 100%;
      border-bottom: 1px solid #eee;
      font-size: 1rem;
      font-weight: 600;
    }
    ul {
      margin: 0;
      margin-top: 0.75rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
      li {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        & > p {
          margin: 0;
          font-weight: 600;
        }
        .liBox {
          display: flex;
          height: 3.125rem;
          align-items: center;
          width: 6rem;
          border-right: 1px solid #eee;
          & > p {
            margin: 0;
            font-size: 1.5rem;
            font-style: oblique;
            font-weight: 600;
          }
          & > span {
            margin-left: 5px;
            color: #aaa;
          }
        }
        &:last-child {
          .liBox {
            border-right: none;
          }
        }
        & > span {
          color: #aaa;
          font-size: 1.6rem;
          i {
            font-size: 1rem;
          }
        }
      }
    }
  }
}
</style>